<template>
  <div class="distri_operation-container">
    <el-form ref="form" :model="formData" label-position="top">
      <!-- <el-form-item label="分销规则：" class="none">
        <div class="mb20">
          <span class="ml50">分销是否需要审核：</span>
          <el-radio-group v-model="form.isAudit">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </div>
        <div class="mb20">
          <span class="ml50">三级分销是否开启：</span>
          <el-radio-group v-model="form.isThird">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </div>
      </el-form-item> -->
      <el-form-item label="分佣规则：">
        <div class="flex mb20">
          <span class="ml50">积分兑现比例：</span>
          <el-input
            v-model="formData.integral"
            type="text"
            disabled
            style="width: 100px; margin-right: 10px"
          ></el-input>
          积分可兑现现金
          <el-input
            v-model="formData.scale"
            type="text"
            disabled
            style="width: 100px; margin: 0 10px"
          ></el-input>
          元
        </div>
        <div class="flex mb20">
          <span class="ml50">分销积分比例:</span>
          <span class="ml30">每产生一个订单时，上一级分销员奖励：</span>
          <el-input
            v-model="formData.integralUp"
            type="text"
            style="width: 100px"
          ></el-input>
          积分
          <span class="ml30">上两级分销员奖励：</span>
          <el-input
            v-model="formData.integralUpTwo"
            type="text"
            style="width: 100px"
          ></el-input>
          积分
        </div>
        <div class="mb20">
          <span class="ml50">邀请人奖励：</span>
          分销员每邀请一人，且首次填手机号登陆时，该分销员奖励：
          <el-input
            v-model="formData.reward"
            type="text"
            style="width: 100px; margin: 0 10px"
          ></el-input>
          积分
        </div>
      </el-form-item>
      <!-- <el-form-item label="申请成为分销员规则：" class="none">
        <span class="ml50">勾选需要满足的条件：</span>
        <el-checkbox-group
          v-model="form.condition"
          class="ml210 flex flex-column"
        >
          <el-checkbox :label="0" class="mb20">
            关注公众号：华泰教育
          </el-checkbox>
          <el-checkbox :label="1" class="mb20">
            消费次数大于
            <el-input
              v-model="form.time"
              type="text"
              style="width: 100px"
            ></el-input>
            次
          </el-checkbox>
          <el-checkbox :label="2">
            消费金额大于
            <el-input
              v-model="form.money"
              type="text"
              style="width: 100px"
            ></el-input>
            元
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item> -->
    </el-form>

    <div class="bottom-btn flex mt30">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </div>
  </div>
</template>

<script>
  import { getDistributeRule, alterDistributeRule } from '@/api/common'
  export default {
    data() {
      return {
        form: {
          isAudit: 0,
          isThird: 0,
          integral: 100,
          superiorRate: 0.2,
          superior2Rate: 0.1,
          isInvitate: 0,
          invitateAward: 20,
          condition: [],
          time: 2,
          money: 10000,
        },
        id: 0,
        formData: {
          integral: 100,
          integralUp: 100,
          integralUpTwo: 100,
          reward: 100,
          scale: 100,
        },
      }
    },
    mounted() {
      this.getDistributeRule()
    },
    methods: {
      getDistributeRule() {
        getDistributeRule().then((res) => {
          if (res.code === 200) {
            this.formData = res.data
            this.id = res.data.id
          }
        })
      },
      save() {
        const arr = Object.keys(this.formData)
        for (let i = 0; i < arr.length; i++) {
          if (!this.formData[arr[i]]) {
            this.$baseMessage('请填写完整', 'error')
            return false
          }
          if (i == arr.length - 1) {
            alterDistributeRule(this.formData).then((res) => {
              if (res.code === 200) {
                this.getDistributeRule()
                this.$baseMessage('保存成功', 'success')
              } else {
                this.$baseMessage(res.msg, 'error')
              }
            })
          }
        }
      },
      reset() {
        this.formData = {
          id: this.id,
          integral: '',
          integralUp: '',
          integralUpTwo: '',
          reward: '',
          scale: '',
        }
        this.$baseMessage('重置成功', 'success')
      },
    },
  }
</script>

<style scoped lang="scss">
  @import './../../assets/styles/common.css';
  .distri_operation-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
  }
  .none {
    display: none;
  }
</style>
